<template>
    <div>
        <div class="login_view">
            <div class="login_view_l" :style="{height: `${height}px`}"></div>
            <div class="login_view_r">
                <img
                    src="../../assets/images/back.png"
                    class="login_view_r_back"
                    @click="back"
                />
                <div class="login_view_r_main">
                    <div class="login_view_r_main_title">找回密码</div>
                    <div class="login_view_r_main_form">
                        <div class="login_view_r_main_form_control">
                            <input
                                type="text"
                                class="login_view_r_main_form_control_value"
                                placeholder="输入手机号"
                                v-model="phone"
                            />
                        </div>
                        <div class="login_view_r_main_form_control">
                            <input
                                type="text"
                                class="login_view_r_main_form_control_value"
                                placeholder="请输入验证码"
                                v-model="code"
                            />
                            <div class="login_view_r_main_form_control_forget" @click="getCode()">{{btnText}}</div>
                        </div>
                        <div class="login_view_r_main_form_control">
                            <input
                                type="password"
                                class="login_view_r_main_form_control_value"
                                placeholder="请输入密码"
                                v-model="password"
                            />
                        </div>
                        <div class="login_view_r_main_form_control">
                            <input
                                type="password"
                                class="login_view_r_main_form_control_value"
                                placeholder="再次输入密码"
                                v-model="repassword"
                            />
                        </div>
                    </div>
                    <div class="login_view_r_main_submit" @click="submit()">
                        确认修改
                    </div>
                </div>
            </div>
        </div>
        <FooterBar />
    </div>
</template>
<script>
import {
    PostResetPsw,
    GetVerifyCode
} from '@api/api';
import FooterBar from '@components/Footer';
export default {
    data() {
        return {
            btnText: '获取验证码',
            phone: '',
            code: '',
            password: '',
            repassword: '',
            flag: true,
            timer: 60,
            height: null
        }
    },
    components: {
        FooterBar
    },
    mounted() {
        this.height = document.body.clientHeight - 60;
    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        getCode() {
            let _this = this;
            let {
                phone,
            } = _this;
            console.log(phone)
            let reg = /^1[3456789]\d{9}$/;
            if (!reg.test(phone)) {
                _this.$message.error('请输入正确的手机号!');
                return;
            }
            if (_this.flag) {
                GetVerifyCode({phone: phone})
                    .then(res=>{
                        _this.$message({
                            message: '验证码已发送!',
                            type: 'success'
                        });
                        _this.siv = setInterval(() => {
                            let timer = _this.timer - 1;
                            _this.timer = timer;
                            _this.btnText = `${timer}s后重新获取`;
                            _this.flag = false;
                            if (_this.timer == 0) {
                                _this.flag = true;
                                _this.timer = 60;
                                _this.btnText = '获取验证码';
                                clearInterval(_this.siv);
                            }
                        }, 1000);
                    });
            }
        },
        submit() {
            let {
                phone,
                code,
                password,
                repassword
            } = this;
            let _this = this;
            let reg = /^1[3456789]\d{9}$/;
            if (!reg.test(phone)) {
                _this.$message.error('请输入正确的手机号!');
                return;
            }
            if (code=='') {
                this.$message.error('验证码不能为空!');
                return;
            }
            if (password == '') {
                _this.$message.error('请输入新密码!');
                return;
            }
            if (repassword != password) {
                _this.$message.error('两次密码输入不一致!');
                return;
            } else {
                let params = {
                    phone,
                    code,
                    password,
                }
                PostResetPsw(params)
                    .then(res=>{
                        _this.$message({
                            message: '密码重置成功!',
                            type: 'success'
                        });
                        _this.back();
                    })
            }
        }
    }
}
</script>
<style scoped>
    .login_view{
        display: flex;
        justify-content: space-between;
        width: 100vw;
        height: 100vh;
    }
    .login_view_l {
        width: 699px;
        height: 100vh;
        background-image: url('../../assets/images/login/bg.png');
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 9999
    }
    .login_view_r {
        flex: 1;
        padding-top: 148px;
        text-align: center;
        position: relative;
    }
    .login_view_r_back {
        position: absolute;
        left: 37px;
        top: 47px;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }
    .login_view_r_main {
        width: 400px;
        margin: 0 auto;
    }
    .login_view_r_main_title {
        height: 22px;
        font-size: 22px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #1D242D;
        line-height: 22px;
        margin-bottom: 39px;
    }
    .login_view_r_main_form {
        margin-bottom: 50px;
    }
    .login_view_r_main_form_control {
        width: 400px;
        height: 50px;
        background: #FFFFFF;
        border: 1px solid #C4C5CB;
        border-radius: 4px;
        position: relative;
        padding: 18px 9 18px 19px;
        margin-bottom: 30px;
    }
    .login_view_r_main_form_control:last-child {
        margin-bottom: 0;
    }
    .login_view_r_main_form_control_icon {
        position: absolute;
        width: 21px;
        height: 25px;
        top: 13px;
        left: 15px;
    }
    .login_view_r_main_form_control_value {
        width: 285px;
        height: 50px;
        line-height: 50px;
        border: none;
        outline: none;
        position: absolute;
        top: 0px;
        left: 19px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
    }
    ..login_view_r_main_form_control_value::placeholder {
        color: #AFB1B9;
    }
    .login_view_r_main_form_control_forget {
        position: absolute;
        top: 18px;
        right: 19px;
        height: 14px;
        line-height: 14px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #1D242D;
        cursor: pointer;
    }
    .login_view_r_main_submit {
        cursor: pointer;
        width: 400px;
        text-align: center;
        height: 50px;
        line-height: 50px;
        background: #1D242D;
        border-radius: 25px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #CEB68A;
    }
    .login_view_register {
        position: absolute;
        left: 0;
        bottom: 35px;
        width: 100%;
        text-align: center;
        height: 14px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #AFB1B9;
        line-height: 38px;
    }
    .login_view_register label {
        color: #CEB68A;
        cursor: pointer;
    }
</style>